<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
	<th:block th:include="include :: header('素材分配')" />
	<th:block th:include="include :: layout-latest-css" />
	<th:block th:include="include :: ztree-css" />
</head>
<body class="gray-bg">
<div class="ui-layout-west">
	<div class="box box-main">
		<div class="box-header">
			<div class="box-title">
				<i class="fa icon-grid"></i> 素材分组
			</div>
		</div>
		<div class="ui-layout-content">
			<div id="tree" class="ztree"></div>
		</div>
	</div>
</div>
<div class="ui-layout-center">
	<div class="container-div">
		<div class="row">
			<div class="col-sm-12 search-collapse">
				<form id="role-form">
					<input type="hidden" id="id" name="id" th:value="${id}">
					<div class="select-list">
						<ul>
							<li>
								<input type="hidden" name="groupId" id="groupId">
							</li>
							<li>
								素材名称：<input type="text" name="materialName"/>
							</li>
							<li>
								<a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
								<a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
							</li>
						</ul>
					</div>
				</form>
			</div>

			<div class="col-sm-12 select-table table-striped">
				<table id="bootstrap-table"></table>
			</div>
		</div>
	</div>
</div>

<th:block th:include="include :: footer" />
<th:block th:include="include :: layout-latest-js" />
<th:block th:include="include :: ztree-js" />
<script th:inline="javascript">
	var imageReg = /.+\.(gif|jpg|jpeg|png|webp|bmp)/i;
	var auditStateDatas = [[${@dict.getType('audit_state')}]];
	var useStateDatas = [[${@dict.getType('use_state')}]];
	var materialTypeDatas = [[${@dict.getType('material_type')}]];

	var prefix = ctx + "cms/product"

	$(function() {
		var options = {
			url: prefix + "/unMaterialList",
			showSearch: false,
			showRefresh: false,
			showToggle: false,
			showColumns: false,
			clickToSelect: true,
			rememberSelected: true,
			queryParams: queryParams,
			modalName: "素材",
			columns: [{
				checkbox: true
			},
				{
					field: 'id',
					title: '主键',
					visible: false
				},
				{
					field: 'groupId',
					title: '分组id',
				},
				{
					field: 'siteId',
					title: '站点id'
				},
				{
					field: 'materialName',
					title: '素材名称'
				},
				{
					field: 'materialType',
					title: '素材类型 字典 1图片2视频',
					formatter: function(value, row, index) {
						return $.table.selectDictLabel(materialTypeDatas, value);
					}
				},
				{
					field: 'description',
					title: '素材描述'
				},
				{
					field: 'materialSize',
					title: '素材大小'
				},
				{
					field: 'savePath',
					title: '保存路径',
					formatter: function(value, row, index) {
						return $.table.imageView(row.savePath);
					}
				},
				{
					field: 'width',
					title: '分辨率 宽'
				},
				{
					field: 'height',
					title: '分辨率 高'
				},
				{
					field: 'remark',
					title: '备注'
				},
				{
					field: 'sort',
					title: '排序'
				},
			]
		};
		$.table.init(options);
		var panehHidden = false;
		if ($(this).width() < 769) {
			panehHidden = true;
		}
		$('body').layout({ initClosed: panehHidden, west__size: 185 });
		queryDeptTree()
	});
	function queryDeptTree()
	{
		var url = ctx + "cms/materialGroup/treeData";
		var options = {
			url: url,
			expandLevel: 2,
			onClick : zOnClick
		};
		$.tree.init(options);

		function zOnClick(event, treeId, treeNode) {
			$("#groupId").val(treeNode.id);
			$.table.search();
		}
	}


	//  格式化文件大小
	function renderFileSize(value){
		if(null==value||value==''){
			return "0 Bytes";
		}
		var unitArr = new Array("Bytes","KB","MB","GB","TB","PB","EB","ZB","YB");
		var index=0,
				srcsize = parseFloat(value);
		index=Math.floor(Math.log(srcsize)/Math.log(1024));
		var size =srcsize/Math.pow(1024,index);
		//  保留的小数位数
		size=size.toFixed(2);
		return size+unitArr[index];
	}

	function queryParams(params) {
		var search = $.table.queryParams(params);
		search.id = $("#id").val();
		return search;
	}

	/* 提交 */
	function submitHandler() {
		var rows = $.table.selectFirstColumns();
		if (rows.length == 0) {
			$.modal.alertWarning("请至少选择一条记录");
			return;
		}
		var data = { "id": $("#id").val(), "materialIds": rows.join() };
		console.log(JSON.stringify(data))
		$.operate.save(prefix + "/saveMaterial", data);
	}
</script>
</body>
</html>